<template>
	<view class="managementDetail">
		<view class="header">
			<image class="statusImg" :src="orderInfo.status == 5?'../../static/images/status.png':'../../static/images/status2.png'" mode=""></image>
			<text class="statusTxt" v-if="orderInfo.paid == 0">
				待支付
			</text>
     <text class="statusTxt" v-if="orderInfo.paid == 1">
      	{{orderInfo.status == 0? "售卖中":orderInfo.status == 1? "待结算": "已完成"}}
      </text>
		</view>
		<view class="title">
			商品清单
		</view>
    <view>
        <view class="goodsItem" v-for="(item, index) in orderInfo.orderProduct" :key="index">
        	<image class="goodsImg" :src="item.cart_info.product.image" mode=""></image>
        	<view class="goodsInfo">
        		<view class="goodName text-twoline-ellipsis" style="height: 108rpx;">
        			{{item.cart_info.product.store_name}}
        		</view>
            <view style="display: flex;justify-content: space-between;">
              <text v-if="orderInfo.paid == 0">总库存 {{item.product_num}}</text>
              <text v-if="orderInfo.paid == 1">剩余售卖周期: {{orderInfo.remaining_sales_cycle}}天</text>
              
            </view>
            <view style="display: flex;justify-content: flex-end;">
              <text style="color: #FF4F44;">预计收益 ￥{{item.income}}</text>
            </view>
<!--            <block>
              <view class="time1">
              	入库时间: 2024-08-21 21:36
              </view>
              <view class="time2">
              	售罄时间: 2024-08-21 21:36
              </view>
              <view class="info-tb">
              	<text class="txt1">剩余售卖周期: 7天</text>
              	<text class="txt2">预计收益: ￥18.00</text>
              </view>
            </block> -->
        	</view>
      </view>
    </view>

		<view class="title">
			订单信息
		</view>
		<view style="padding: 20rpx 0;box-sizing: border-box;">
			<view class="line">
				<view class="labels">订单编号</view>
				<view class="values">{{orderInfo.order_sn}}</view>
			</view>
			<view class="line">
				<view class="labels">生成时间</view>
				<view class="values">{{orderInfo.create_time}}</view>
			</view>
			<block v-if="orderInfo.paid == 1 && orderInfo.status != 5">
        <view class="line">
        	<view class="labels">支付时间</view>
        	<view class="values">{{orderInfo.pay_time}}</view>
        </view>
        <view class="line" v-if="orderInfo.pay_type == 1">
        	<view class="labels">支付号</view>
        	<view class="values">{{orderInfo.transaction_id}}</view>
        </view>
        <view class="line">
        	<view class="labels">支付方式</view>
        	<view class="values">{{orderInfo.pay_type == 0?'余额':'微信'}}</view>
        </view>
      </block>
			<view class="line" v-if="orderInfo.paid == 1 && orderInfo.status == 3">
				<view class="labels">结算时间</view>
				<view class="values">{{orderInfo.settlement_time}}</view>
			</view>
		</view>
    <view class="footer">
      <view class="btns">
        <block v-if="orderInfo.paid == 0">
          <view class="cancelBtn" @click="handleClose">取消订单</view>
          <view class="toPay" @click="openPicker">立即支付</view>
        </block>
        
        <view class="toPay" v-if="orderInfo.paid == 1 && orderInfo.status == 1" @click="jiesuan">结算</view>
      </view>
    </view>
    <uv-modal ref="modal" title="确认取消订单吗？" :showCancelButton="true" content='' @confirm="confirm"></uv-modal>
    <uv-picker ref="picker" :columns="columns" @confirm="confirmPayWay" keyName="name"></uv-picker>
    <uv-modal ref="modal2" title="确认去结算吗？" :showCancelButton="true" content='' @confirm="confirm2"></uv-modal>
	</view>
</template>

<script>
  import reqApi from "../../api/api.js";
	export default {
		data() {
			return {
         orderInfo: {},
         columns: [
           [
             {
               name: "微信",
               value: "weixin"
             },
             {
               name: "账户余额",
               amount: 0,
               value: "balance"
             }
           ]
         ],
          type: "weixin",
          orderId: ""
			}
		},
    onLoad(option){
      this.getDetail(option.order_id);
      let userInfo = uni.getStorageSync("userInfo");
      this.columns[0][1]['name'] = `账户余额(${userInfo.now_money})`;
    }, 
		methods: {
      jiesuan(item){
        this.$refs.modal2.open();
      },
      confirm2() {
        console.log('点击确认按钮');
        reqApi.jiesuan({
          id: this.orderInfo.order_id
        }).then(res => {
          uni.showToast({
            title: "结算成功",
            icon: 'none',
            mask: true,
            duration: 1000,
          })
          setTimeout(() => {
            this.$refs.modal2.close();
            this.getDetail(this.orderInfo.order_id);
          }, 1000)
        })
      },
      getDetail(id){
        reqApi.orderDetail({id}).then(res=>{
          console.log("订单详情", res);
          this.orderInfo = res.data;
        })          
      },
      handleClose(){
        this.$refs.modal.open();
      },
      // 选择支付方式
      confirmPayWay(e) {
        const {
          name,
          value
        } = e.value[0];
        console.log('name', name);
        console.log('value', value);
        this.type = value;
        let self = this;
        reqApi.payOrder({
          id: self.orderInfo.group_order_id,
          type: self.type
        }).then(res => {
          if (self.type == "weixin") {
            let jsConfig = res.data.result.config;
            uni.requestPayment({
              provider: 'wxpay',
              orderInfo: jsConfig,
              success: (e) => {
                uni.showToast({
                  title: "支付成功",
                  duration: 1000,
                  icon: 'none',
                  mask: true
                })
                setTimeout(() => {
                  self.$refs.paging.reload();
                }, 1000)
              },
              fail: (e) => {
                uni.showToast({
                  title: "支付失败",
                  duration: 1500,
                  icon: 'none',
                  mask: true
                })
              }
            });
          } else {
            uni.showToast({
              title: "支付成功",
              icon: 'none',
              mask: true,
              duration: 1000,
            })
            setTimeout(() => {
              self.getDetail(self.orderInfo.order_id);
            }, 1000)
          }
        
        })
      },
      openPicker(){
        this.$refs.picker.open();
      },
      confirm() {
        console.log('点击确认按钮');
        reqApi.cancelOrder({
          id: this.orderInfo.order_id
        }).then(res => {
          uni.showToast({
            title: "取消成功",
            icon: 'none',
            mask: true,
            duration: 1000,
          })
          setTimeout(() => {
            this.$refs.modal.close();
            uni.switchTab({
              url: "/pages/management/managementList"
            })
          }, 1000)
        })
      },
		}
	}
</script>

<style lang="scss" scoped>
  .footer{
    padding: 0 60rpx;
    box-sizing: border-box;
    position: fixed;
    bottom: 30rpx;
    width: 100%;
    .btns{
      display: flex;
      justify-content: flex-end;
      .cancelBtn{
        width: 300rpx;
        height: 88rpx;
        border-radius: 200rpx;
        border: 2rpx solid #EEA800;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 32rpx;
        color: #EEA800;
        text-align: center;
        line-height: 88rpx;
        margin-left: 20rpx;
      }
      .toPay{
        width: 300rpx;
        height: 88rpx;
        background: #EEA800;
        border-radius: 200rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 32rpx;
        color: #FFFFFF;
        text-align: center;
        line-height: 88rpx;
        margin-left: 20rpx;
      }
    }
  }
	.title {
		background: #F6F6F6;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
	}
    .line{
		height: 48rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.labels{
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
		}
		.values{
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #222222 !important;
		}
	}
	.managementDetail {
		background: #fff;
        
		.header {
			width: 100%;
			height: 128rpx;
			background: #EEA800;
			padding: 0 30rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			.statusImg {
				width: 48rpx;
				height: 48rpx;
				margin-right: 20rpx;
			}
			.statusTxt {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}

		.goodsItem {
			display: flex;
			justify-content: space-between;
			padding: 30rpx;
			box-sizing: border-box;
			.goodsImg {
				width: 160rpx;
				height: 160rpx;
				border-radius: 20rpx;
				margin-right: 20rpx;
			}
			.goodsInfo{
				flex: 1;
				display: flex;
				flex-direction: column;
				.time1{
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
				}
				.time2{
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
				}
				.info-tb{
					.txt1{
						
					}
					.txt2{
						
					}
				}
			}
	
		}
		.line{
			display: flex;
			justify-content: space-between;
			.label{
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
			}
			.value{
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #FF4F44;
			}
		}
	}
</style>
